<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大屏数据可视化</title>
    <link rel="stylesheet" href="./assets//css/reset.css">
</head>
<body>
    <!-- <div class="test"></div> -->
    <!-- 头 -->
    <header>
        <h1>大屏数据可视化</h1>
        <span>2022年3月22日16点40分10秒</span>
    </header>
    <!-- 头 -->

    <!-- 内容 -->
    <section class="main">
        <div class="column">
            <div class="box" style="height: 4rem"></div>
            <div class="box box-l2" style="height: 2.6rem">
                <div class="alltitle">标题样式</div>
                <div class="wraptit"><span>单号</span><span>金额</span><span>品名</span><span>时间</span></div>
                <div class="wrap str_wrap str_vertical">
                    <div class="str_move str_origin" style="top: -4.0994rem;">
                        <ul>
                            <li>
                                <p><span>123321</span><span>999</span><span>手雷</span><span>3秒</span></p>
                            </li>
                            <li>
                                <p><span>123321</span><span>999</span><span>手雷</span><span>3秒</span></p>
                            </li>
                            <li>
                                <p><span>123321</span><span>999</span><span>手雷</span><span>3秒</span></p>
                            </li>
                            <li>
                                <p><span>123321</span><span>999</span><span>手雷</span><span>3秒</span></p>
                            </li>
                            <li>
                                <p><span>123321</span><span>999</span><span>手雷</span><span>3秒</span></p>
                            </li>
                            <li>
                                <p><span>123321</span><span>999</span><span>手雷</span><span>3秒</span></p>
                            </li>
                            <li>
                                <p><span>123321</span><span>999</span><span>手雷</span><span>3秒</span></p>
                            </li>
                            <li>
                                <p><span>123321</span><span>999</span><span>手雷</span><span>3秒</span></p>
                            </li>
                            <li>
                                <p><span>123321</span><span>999</span><span>手雷</span><span>3秒</span></p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="box box-l3" style="height: 2.6rem"></div>
        </div>
        <div class="column">
            <div class="box box-c1">
                <div class="leftWord">
                    <span>总体情况(单位:元)</span>
                    <div class="number1">119948841</div>
                </div>
                <div class="rightImgs">
            
                    <div class="Imgs">
                        <span>标题样式</span>
                        <div class="round round_1"></div>
                    </div>
                    <div class="Imgs">
                        <span>标题样式</span>
                        <div class="round round_2"></div>
                    </div>
                    <div class="Imgs">
                        <span>标题样式</span>
                        <div class="round round_3"></div>
                    </div>
            
                </div>
            </div>
            <div class="box box-c2" style="height: 3.5rem"></div>
            <div class="box box-c3" style="height: 3.4rem"></div>
        </div>
        <div class="column">
            <div class="box box-r1" style="height:3rem">
                <div class="alltitle">标题样式</div>
                <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <th scope="col">排名</th>
                            <th scope="col">公司</th>
                            <th scope="col">数量</th>
                            <th scope="col">增长率</th>
                        </tr>
                        <tr>
                            <td><span>1</span></td>
                            <td>腾讯科技</td>
                            <td>114110万<br></td>
                            <td>80%<br></td>
                        </tr>
                        <tr>
                            <td><span>2</span></td>
                            <td>百度公司</td>
                            <td>923823万</td>
                            <td>42%</td>
                        </tr>
                        <tr>
                            <td><span>3</span></td>
                            <td>新浪</td>
                            <td>1240253万</td>
                            <td>36%</td>
                        </tr>
                        <tr>
                            <td><span>4</span></td>
                            <td>网易</td>
                            <td>0.5亿</td>
                            <td>11%</td>
                        </tr>
                        <tr>
                            <td><span>5</span></td>
                            <td>雅虎</td>
                            <td>13423万</td>
                            <td>8%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="box box-r2" style="height:3rem">
                <div class="alltitle">标题样式</div>
                <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <th scope="col">排名</th>
                            <th scope="col">公司</th>
                            <th scope="col">数量</th>
                            <th scope="col">增长率</th>
                        </tr>
                        <tr>
                            <td><span>1</span></td>
                            <td>腾讯科技</td>
                            <td>114110万<br></td>
                            <td>80%<br></td>
                        </tr>
                        <tr>
                            <td><span>2</span></td>
                            <td>百度公司</td>
                            <td>923823万</td>
                            <td>42%</td>
                        </tr>
                        <tr>
                            <td><span>3</span></td>
                            <td>新浪</td>
                            <td>1240253万</td>
                            <td>36%</td>
                        </tr>
                        <tr>
                            <td><span>4</span></td>
                            <td>网易</td>
                            <td>0.5亿</td>
                            <td>11%</td>
                        </tr>
                        <tr>
                            <td><span>5</span></td>
                            <td>雅虎</td>
                            <td>13423万</td>
                            <td>8%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="box box-r3" style="height: 3.2rem"></div>
        </div>
    </section>
    <!-- 内容 -->

    <script src="./assets//js/flexible.js"></script>
    <script src="http://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
    <script src="http://unpkg.com/echarts"></script>
    <script src="./assets/js/left1.js"></script>
    <script src="./assets/js/left2.js"></script>
    <script src="./assets/js/left3.js"></script>
    <script src="./assets/js/c1.js"></script>
    <script src="./assets/js/c2.js"></script>
    <script src="./assets/js/c3.js"></script>
    <script src="./assets/js/r3.js"></script>
    <script>
        setInterval(() => {
                $('header span').html(wofDate.format('Y年m月d日H时i分s秒'))
            }, 1000)
    </script>
</body>
</html>